<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../c-asserts/sui/sui1.0.1.css" />
    <link rel="stylesheet" type="text/css" href="../../c-asserts/mui/css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../../c-asserts/swiper/css/swiper.css" />
      <style type="text/css">
        .transparent{
            position:fixed;
            z-index:1990;
            background-color:#EB4F38;
            height:44px;
            width:100%;
            opacity:0.0;
            top:0;
        }
        .header{
            width:100%;
            position:fixed;
            z-index:19901225;
            height:44px;
            line-height:44px;
            background-color:transparent;
            top:0;
        }
        .mui-icon-back,.mui-icon-star,.sui-icon-share{
            color:#FFFFFF;
            font-size:24px !important;
            line-height:32px;
        }
        .share{
            right:10px;
        }
        .item-option{
            margin-bottom:12px;
            background-color:#FFFFFF;
        }
        .content-item{
            padding:10px 12px;
        }
        .content-item{
            border-bottom:1px solid #efeff4;
        }
        .theme-name{
            font-size:14px;
        }
        .theme-h4{
            font-size:16px;
            color:#666666;
        }
        .theme-h4.teambuy{
            line-height:25px;
        }
        .theme-h4.name{
            padding-bottom:4px;
        }
        .content-duang{
            font-size:15px;
            color:#8f8f94;
            padding-left:12px;
        }
        .swiper-slide img{
            width:100%;
        }
        .theme-img{
            width:90px;
        }
        .theme-img img{
            width:80px;
            height:70px;
        }
        .content-themeinfo{
            height:70px;
        }
        .colorgray{
            color:#8f8f94;
        }
        .colorgray.price{
            font-size:14px;
            color:#EB4F38;
        }
        .colorgray.out{
            font-size:14px;
        }
        .evaluate-img{
            width:55px;
            height:45px;
        }
        .evaluate-img img{
            width:45px;
            height:45px;
            border-radius:100%;
        }
        .shopinfo{
            position:relative;
            height:40px;
        }
        .location{
            width:40px;
            position: absolute;
            left:0;
        }
        .location span{
            display:block;
            font-size:23px;
            color:#666666;
            line-height:40px;
            text-align:center;
        }
        .phone{
            position: absolute;
            right:0;
            padding-left:10px;
            border-left:1px solid #efeff4;
        }
        .phone span{
            display:block;
            font-size:32px;
            line-height:40px;
            color:#FFFFFF;
            background-color:#4cd964;
            padding:0 4px;
            border-radius:5px;
        }
        .weizhi{
            position: absolute;
            width:auto;
            left:40px;
            right:60px;
            font-size:14px;
            line-height:20px;
            height:40px;
            overflow:hidden;
            text-overflow:ellipsis;
            color:#8f8f94;
        }
        .review{
            font-size:14px;
            line-height:20px;
            padding-top:5px;
        }
        .review p{
            margin-bottom:0;
        }
        .review-name{
            font-size:15px;
            line-height:23px;
        }
        .review-zen{
            color:#EB4F38;
        }
        .toreview{
            font-size: 14px;
            color:#8f8f94;
        }
        .swiper-container {
            height: 260px;
        }
        .evaluate-img img{
            width:45px;
            height:45px;
            border-radius:100%;
        }
        .evaluate-content{
            padding-top: 5px;
            height: auto;
            color: #666666;
            font-size: 14px;
            white-space:normal;
        }
        .evaluate-reply{
            color: #ff7720;
            font-size: 14px;
        }
        .evaluate-star-box{
            width:100px;
            background-color:#c4c2c2;
            height: 21px;
        }
        .evaluate-star1{
            width:20px;
            height:21px;
            background-color:#ff7720;
        }
        .evaluate-star2{
            width:40px;
            height:21px;
            background-color:#ff7720;
        }
        .evaluate-star3{
            width:60px;
            height:21px;
            background-color:#ff7720;
        }
        .evaluate-star4{
            width:80px;
            height:21px;
            background-color:#ff7720;
        }
        .evaluate-star5{
            width:100px;
            height:21px;
            background-color:#ff7720;
        }
        .evaluate-starback{
            width:100px;
            background-image:url(../../c-image/star.png);
            background-size:100% 100%;
            background-position:center center;
            background-repeat:no-repeat;
            height:21px;
        }
    </style>
</head>
<body ms-controller="shop-detail" class="ms-controller">
<div class="transparent"></div>
<div class="header">
    <button class="mui-btn mui-btn-link mui-btn-nav mui-pull-left back" onclick="javascript:history.back(-1);" tapmode>
        <span class="mui-icon mui-icon-back"></span>
    </button>
    <button class="mui-btn mui-btn-link mui-btn-nav mui-pull-right star"  onclick="shopcollect();" tapmode>
        <span class="mui-icon mui-icon-star"></span>
    </button>
   
</div>
<div class="item-option">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" ms-repeat="shop.photo" data-repeat-rendered="imgReady">
                <img ms-attr-src="el + '?imageView2/1/h/260'">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="content-item">
        <div class="theme-h4 name">{{shop.shopname}}</div>
    </div>
    <div class="content-item">
        <div class="shopinfo">
            <div class="location"><span class="mui-icon mui-icon-location"></span></div>
            <div class="weizhi" ms-click="toMap(shop.lon,shop.lat,shop.shopname)">{{shop.area}} {{shop.street}}</div>
            <div class="phone" ms-click="phoneCall(shop.phone)"><span class="mui-icon  mui-icon-phone"></span></div>
        </div>
    </div>
</div>

<div class="item-option">
    <div class="content-item sui-flex-row" ms-visible="(shop.evalstar==0)">
        <div class="content-duang">暂无统计评分</div>
    </div>
    <div class="content-item sui-flex-row" ms-click="toEval(shop.shopid)" ms-visible="(shop.evalstar!=0)">
        <div class="evaluate-star-box">
            <div ms-class="evaluate-star{{shop.evalstar}}">
                <div class="evaluate-starback"></div>
            </div>
        </div>
        <div class="content-duang">{{shop.evalstar}} 分</div>
        <div class="sui-flex1"></div>
        <div class="content-duang" >评价<span class="mui-icon mui-icon-arrowright"></span></div>
    </div>
</div>

<div class="item-option">
    <div class="content-item sui-flex-row">
        <div class="theme-h4 teambuy">主题</div>
    </div>
    <div class="content-item">
        <div class="sui-flex-row" ms-repeat="themes" data-repeat-rendered="themesReady" ms-click="toTheme(el.themeid)">
            <div class="theme-img"><img class="lazyload" src="../../c-image/loading.gif" ms-attr-data-original="el.coverimg"/></div>
            <div class="sui-flex1">
                <div class="sui-flex-col content-themeinfo" onclick="toOptioninfo(this)">
                    <div class="theme-name">{{el.themename}}</div>
                    <div class="sui-flex1"></div>
                    <div class="sui-flex-row">
                        <div class="colorgray out">{{getNameById(icontent,el.content)}}，{{getNameById(icategory,el.category)}}</div>
                        <div class="sui-flex1"></div>
                        <div class="colorgray price">￥ {{el.displayprice}} </div>
                    </div>
                    <div class="sui-flex1"></div>
                    <div class="sui-flex-row">
                        <div class="colorgray price">
                            <div class="evaluate-star-box">
                            <div ms-class="evaluate-star{{el.evalstar}}">
                                <div class="evaluate-starback"></div>
                            </div>
                        </div>
                        </div>
                        <div class="sui-flex1"></div>
                        <div class="colorgray out">已售 {{el.soldnum}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br>	
<div class="item-option">
    <div class="content-item sui-flex-row" >
        <div class="theme-h4 teambuy">用户评价</div>
       <div class="sui-flex1"></div>
        <div class="content-duang" ></div>
    </div>
	<ul class="mui-table-view">
		<li ms-repeat="evals" class="mui-table-view-cell mui-media" style="white-space:normal;">
			<a href="javascript:;" class="">
			    <img ms-attr-src="el.headimgurl" class="mui-media-object mui-pull-left">
			    <div class="mui-media-body">
			        <div class="sui-flex-row">
			            {{el.username}}
			            <div class="sui-flex1"></div>
			            <div class="review-zan" ms-click="zanClick(el.id)" ><span class="sui-icon sui-icon-zan">{{el.like}}</span></div>
			        </div>
			        <div class="sui-flex-row">
			            <div class="evaluate-star-box">
			                <div ms-class="evaluate-star{{el.evalstar}}">
			                    <div class="evaluate-starback"></div>
			                </div>
			            </div>
			        </div>
			    </div>
			    <div class="evaluate-content">
			        {{el.content}}
			    </div>
			    <div class="mui-content-padded evaluate-content" ms-visible="(el.reply!='')">
			        <span class="evaluate-reply">商家回复：</span>
			        {{el.reply}}
			    </div>
			</a>
		</li>
	</ul>
</div>
</body>
<script type="text/javascript" src="../../c-script/api.js"></script>
<script type="text/javascript" src="../../c-script/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="../../c-script/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="../../c-asserts/swiper/js/swiper.min.js"></script>
<script type="text/javascript" src="../../c-script/public.js"></script>
<script type="text/javascript" src="../../c-script/avalon.mobile.js"></script>
<script type="text/javascript">
    var transparent;
    var wrapper;
    var bodyHeight;
    var shopModel = avalon.define({
        $id:"shop-detail",
        shop:{},
        themes:new Array(),
        evals:new Array(),
        removePhotoClick:function(url){
            for (var i=0;i<model.shop.photo.length;i++){
                if (model.shop.photo[i]==url){
                    model.shop.photo.splice(i,1);
                }
            }
        },
        saveClick:function(){
            callSvr("shop/updateDetail",model.shop, function(result) {
                 toastr.success('保存成功！','');
                 callSvr("shop/getDetail",{}, function(result) {
                     model.shop = result;
                });
            });
        },
        uploaderClick:function(){
           popWindowShow(dialog);
        },
        imgReady:function(){//在dom渲染完成之后再初始化swiper-wrapper插件
            var mySwiper = new Swiper('.swiper-container',{
                pagination : '.swiper-pagination',
                loop:true,
                autoplay : 5000});
            transparent = $('.transparent');
            wrapper = $('.swiper-wrapper').height() - 44;
            bodyHeight = $('body').height();
            setInterval (function(){
                var htmlbi =  wrapper / bodyHeight ;
                var scrolltop = document.body.scrollTop;
                var scrollheight = document.body.scrollHeight;

                var scrollbi = scrolltop / scrollheight;

                if(scrollbi < htmlbi) transparent.css('opacity',parseFloat(scrollbi / htmlbi).toFixed(1));
                else transparent.css('opacity',1);
            },100);
        },
        themesReady:function(){
            $(".lazyload").lazyload();
        },
        toMap:function(lon,lat,name){
            api.openWin({
                name: 'amapwin',
                url: '../public/amapwin.html',
                pageParam:{lon:lon,lat:lat,name:name}
            });
        },
        phoneCall:function(number){
            api.call({number:number});
        },
        toEval:function(shopid){
          		var shopid=shopid;
            location.href="evaluate.html";
        },
        toTheme:function(themeid){
	        api.closeWin({
	        	name: 'theme',
	        	duration:0
	        });
               // pageParam:{themeid:themeid+""}
            location.href="theme.html";
        }
    });
   
    var isinit = false;
    $(document).ready(function(){
        if (isinit) return;
        // iosConfig($('.transparent'));
        // var iosHeight = iosConfig($('.header'));
        
        callSvr("shop/getById",parseQueryString(window.location.search),function(result){
            shopModel.shop = result;
        });
        
        callSvr("theme/find",parseQueryString(window.location.search),function(result){
            shopModel.themes = result;
        });
        
        var param=parseQueryString(window.location.search);
        param.type="4";
        param.page=1;
        param.pagesize=3;
        callSvr("eval/find",param,function(result){
            shopModel.evals = result;
        });
        isinit = true;
    });
    function toreview(){
        location.href="reviewwin.html";
    };
    
    function shopcollect(){
         myPostAjax('user/collectShop.json',{shopid:shopid,code:getUserCode()},function(ret){                  
        });
        alert("收藏店铺成功");
    
    };
        function toOptioninfo(obj){
        var themeid = $(obj).attr('data-frameId');

          //  pageParam:{themeid:themeid}
        location.href="theme.html";
    }
</script>
</html>